<template>
    <div id="CloudBody">
        <div class="InputSearch">
            <div class="inputContent">
                <input type="search" v-model="value" maxlength="20" v-on:keyup.enter="getList()" placeholder="请查询">
            </div>
            <div class="book" v-on:click="openCall()">
                <p>高级筛选</p>
                <span></span>
            </div>
        </div>
        <div class="bodys" style="height:1000px;">
            <div class="body">
                <div class="list" v-for="item in model" :key="item.id">
                    <router-link :to="{path:'/Detail', query:{id:item.id}}">
                        <div class="list_left">
                            <p class="name">{{item.name}}</p>
                            <p class="tel">{{item.mobile}}</p>
                        </div>
                        <div class="list_right">
                            <p>{{item.store}}</p>
                            <p>备注:{{item.remark | text}}</p>
                            <p class="date">时间：{{item.updatedAt | dateMoment("YYYY-MM-DD HH:mm")}}</p>
                        </div>
                    </router-link>
                </div>
    
            </div>
        </div>
        <router-link to="form">
            <div class="add">
                <img src="../../../static/img/add.png">
            </div>
        </router-link>
    </div>
</template>
<script>
import moment from "moment";
export default {
  name: "File",
  data() {
    return {
      value: "",
      proectId: "",
      deptId: "",
      departments: null,
      model: []
    };
  },
  methods: {
    allPort: function() {
      alert(11);
      if (this.value) {
        this.$http
          .get(
            "api/member/memberList?text=" +
              this.value +
              "&id=" +
              this.proectId +
              "&deptId=" +
              this.departments
          )
          .then(res => {});
        return;
      }
      this.$http
        .get(
          "/api/member/memberList?text=" +
            this.value +
            "&id=" +
            this.proectId +
            "&deptId=" +
            this.departments
        )
        .then(res => {
          this.model = res.body;
        });
    },

    getList: function() {
      alert(this.value);
      this.$http.get("/api/member/memberList?text=" + this.value).then(
        res => {
          this.model = res.body;
          // alert(res.body)
        },
        error => {
          alert(error.body);
        }
      );
    },

    getEventList: function(eventid) {
      let proectId = eventid;

      if (!proectId) {
        proectId = "";
        this.$ddapi.showLoading("loading...");
      } else {
        this.$ddapi.showLoading("加载更多");
      }

      // if (this.user.departments[0].id) {
      //     this.model = [];
      //     this.$http.get('api/member/memberList?text=' + this.value + '&id=' + proectId + '&deptId=' + this.user.departments[0].id).then(res => {
      //         alert(JSON.stringify(res));
      //     })
      //     return;
      // }

      if (this.value) {
        this.model = [];
        this.$http
          .get(
            "api/member/memberList?text=" +
              this.value +
              "&id=" +
              proectId +
              "&deptId=" +
              this.departments
          )
          .then(res => {
            alert(JSON.stringify(res));
          });
      } else {
        this.$http.get("/api/member/memberList?id=" + proectId).then(
          res => {
            this.$ddapi.hidePreloader();

            if (res.body.length == 0) {
              this.$ddapi.toast("已⽆更多信息");

              return;
            }

            res.body.map(item => {
              this.model.push(item);
            });

            //alert(JSON.stringify(res))
          },
          err => {
            alert(JSON.stringify(err));
            this.$ddapi.toast("加载失败，请检查网络！");
            this.$ddapi.hidePreloader();
          }
        );
      }
    },
    scrolldown: function() {
      this.$ddapi.scrollLoad().then(res => {
        if (res == 1) {
          let eventId = this.model[this.model.length - 1].id;
          this.getEventList(eventId);
        }
        this.scrolldown();
      });
    },

    openCall: function() {
      this.$ddapi.departmentsPicker().then(
        user => {
          this.departments = user[0].id;
          alert(JSON.stringify(user));
          // "/api/member/getDeptIds"
          this.$http
            .get(
              "/api/member/memberList?text=" +
                this.value +
                "&id=" +
                this.proectId +
                "&deptId=" +
                this.departments
            )
            .then(
              res => {
                this.model = res.body;
                alert(JSON.stringify(res.body));
                // this.getEventList();
              },
              err => {
                alert(JSON.stringify(err));
              }
            );
        },
        err => {
          alert(JSON.stringify(err));
        }
      );
    }
  },
  mounted: function() {
    this.scrolldown();
  },
  created: function() {
    this.getEventList();

    // this.$http.get("/api/member/getDeptIds").then(res => {
    //     alert(JSON.stringify(res));
    // })
  }
};
</script>
<style scoped>
.book {
  position: absolute;
  top: 32%;
  right: 4%;
}

.book {
  color: #cc982b;
  font-size: 1.5rem;
}

.book span {
  position: absolute;
  top: 5%;
  right: -3%;
  display: inline-block;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid #d31d1d;
  background: #d31d1d;
}

.add {
  position: fixed;
  width: 100%;
  bottom: 2%;
  left: 42%;
}

.add img {
  box-shadow: 0 8px 20px rgba(233，233，233，0.6);
  width: 4.8rem;
}

.date {
  font-size: 1rem;
  color: #919090;
}

.seek {
  border-top: 1px solid #d4d4d4;
}

.InputSearch {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f8f8;
  padding: 1.6rem 8.2rem 1.5rem 1.2rem;
  box-shadow: 1px 2px 5px 0px #cdcdcd;
  z-index: 2;
}

.inputContent {
  border: 1px #dbdada solid;
  border-radius: 0.3rem;
  padding-right: 1.1rem;
  background-color: #fff;
}

.inputContent input {
  width: 120%;
  text-align: center;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.2rem;

  background-size: 2rem;
  appearance: none;
}

input[type="search"] {
  background: url("./../../../static/img/icon-13.png") left no-repeat;
  background-position: 1.2rem 0.7rem;
  background-size: 1.6rem 1.6rem;
}

.bodys {
  background: #fff;
  border-top: 1px solid #d9d8d8;
  margin-top: 7rem;
}

.body {
  overflow: scroll;
  margin: 0rem 2rem;
}

.list a {
  border-bottom: 1px solid #f5f5f5;
  display: -webkit-box;
  padding: 1rem 1rem 1rem 1rem;
  background: #fff;
}

.list_left {
  width: 38%;

  border-right: 1px solid #f5f5f5;
  height: 4rem;
}

.name {
  font-size: 1.8rem;
  color: #47aa96;
}

.tel {
  font-size: 1.3rem;
  color: #919090;
}

.list_right {
  width: 150px;
  font-size: 1.3rem;
  margin-left: 10%;
}

#CloudBody {
  height: 100%;
  overflow-y: scroll;
}
</style>


